<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="A" label="部门" width="180" />
      <el-table-column prop="B" label="业绩（万元）" width="180" />
      <el-table-column prop="C" label="业绩占比" />
      
    </el-table>
    
  </template>
<script lang="ts" setup>
import { ref, watch, onMounted, defineProps } from 'vue';
interface User {
  date: string
  name: string
  address: string
}

interface IProps {
  data: Array<any>;
}

const props = defineProps<IProps>();
    const tableArray = ref<User[]>(props.data.filter(obj => obj.hasOwnProperty('A') && obj.hasOwnProperty('B') && obj.hasOwnProperty('C')));   

    watch(() => props.data, (newData) => {
  console.log(newData);
  if (newData) {
    const newArray = newData.filter(obj => obj.hasOwnProperty('A') && obj.hasOwnProperty('B') && obj.hasOwnProperty('C'));
    tableArray.value = newArray;
  }
});

//变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
const brnn = ()=>{
    
    const newArray = props.data.filter(obj => obj.hasOwnProperty('A') && obj.hasOwnProperty('B') && obj.hasOwnProperty('C'));
    console.log(newArray)
}

const tableData = tableArray
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>